<template>
  <div class="message_main">
    <head-top  head-title="论坛" publish="发布话题"></head-top>
    <!--<head-top head-title="论坛" publish="发布话题" @publish="goPublishPage"></head-top>-->
    <div class="forum-wrapper">
      <div class="vfor" v-for="(list,index) in detail" :key="index">
        <router-link :to="'/message/Reply/' +list.id" tag="div">
          <avatar class="avt" :list="list"></avatar>
          <div class="desc-pic">
            <div class="desc">
              {{list.content}}
            </div>
            <div v-if="list.img" class="pic_img clearfix">
              <div v-for="(item,index) in list.img" :key="index" class="img_li">
                <div class="img" v-lazy:background-image="item"></div>
              </div>
            </div>
          </div>
        </router-link>
      </div>
    </div>
    <div class="default" v-show="!detail.length && !noResult">
      <p>数据加载中</p>
    </div>
    <div class="default1" v-show="noResult">
      <p>抱歉！暂无数据</p>
    </div>
    <v-footer></v-footer>
  </div>
</template>
<style lang="scss">
  .message_main {
    padding-top: 40px;
    padding-bottom: 60px;
    .forum-wrapper {
      background: #fff;
      .desc-pic {
        padding: 10px;
        .desc {
          line-height: 16px;
          font-size: 13px;
        }
        .pic_img {
          width: 100%;
          margin-top: 7px;
          .img_li {
            width: 24%;
            height: 80px;
            margin-top: 1%;
            float: left;
            margin-left: 1%;
            .img {
              width: 100%;
              height: 100%;
              background-size: cover;
              background-color: #f2f2f2;
            }
          }
        }
      }
      .vfor {
        border-bottom: 10px solid #f2f2f2;
        &:last-child {
          border-bottom: none;
        }
      }
    }
    .default {
      width: 100%;
      flex: 1;
      display: inline-flex;
      padding-top: 100px;
      justify-content: center;
      align-items: center;
      background: url("../../assets/loading.gif") no-repeat;
      background-size: 40px 40px;
      background-position: center;
      padding-bottom: 100px;
      p {
        font-size: 15px;
        color: #666;
        margin-top: 100px;
      }
    }
    .default1 {
      width: 100%;
      flex: 1;
      display: inline-flex;
      padding-top: 0px;
      justify-content: center;
      align-items: center;
      background: url("../../assets/default.png") no-repeat;
      background-size: 100px 100px;
      background-position: center;
      padding-bottom: 20px;
      p {
        font-size: 15px;
        color: #0b7ad9;
        margin-top: 190px;
      }
    }
  }
</style>
<script>
  import Footer from '../footer/Footer.vue'
  import headTop from '../header/Header.vue'
  import { Toast } from 'mint-ui'
  import avatar from '../common/avatar.vue'
  import descPic from '../common/desPic.vue'
  import { getMessage } from '../../api/message.js'

  export default {
    name: 'Message',
    data () {
      return {
        lists: [],
        noResult: false
      }
    },
    components: {
      'v-footer': Footer,
      headTop,
      avatar,
      descPic
    },
    // 设置缓存从哪个页面返回
    beforeRouteEnter: (to, from, next) => {
      if (from.name === 'Reply') {
        to.meta.isBack = true
      }
      next()
    },
    activated () {
      if (!this.$route.meta.isBack) {
        this._getMessage()
      }
      this.$route.meta.isBack = false
    },
    // created () {
    //   this._getMessage()
    // },
    methods: {
      // goPublishPage () {
      //   this.$router.push('/message/Topic')
      // },
      _getMessage () {
        this.noResult = false
        getMessage().then(res => {
          if (res.code === 200) {
            this.lists = res.data
            // console.log(this.lists)
          }
          if (this.lists.length === 0) {
            this.noResult = true
          } else {
            this.noResult = false
          }
        })
      }
    },
    computed: {
//    使最新发布的数据排在最前面
      detail () {
        if (this.lists.length < 0) {
          Toast({
            message: '暂无数据',
            position: 'middle',
            duration: 2500
          })
        } else {
          return this.lists.reverse()
        }
      }
    }
  }
</script>
